<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
  	<title>Slider</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="description" content="">

 <!-- styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/docs.css" rel="stylesheet">
    <link href="css/prettify.css" rel="stylesheet">
    <link href="css/tm_docs.css" rel="stylesheet">
    <link href="css/camera.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <link href="css/ie.css" rel="stylesheet">
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

  <body data-spy="scroll" data-target=".bs-docs-sidebar">


<!-- Navbar
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top" id="advanced">
      <span class="trigger"><strong></strong><em></em></span>
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="scaffolding.html">Bootstrap</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="home">
                <a href="../index.html"><img src="img/tm/tm_home.png" alt=""></a>
              </li>
              <li class="divider-vertical"></li>
              <li >
                <a href="scaffolding.html">Scaffolding</a>
              </li>
              <li class="">
                <a href="base-css.html">Base CSS</a>
              </li>
              <li class="">
                <a href="components.html">Components</a>
              </li>
              <li class="">
                <a href="javascript.html">Javascript</a>
              </li>
              <li class="divider-vertical"></li>
              <li class="dropdown active">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">TM add-ons <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="../404.html">Pages</a>
                    <ul>  
                      <li><a href="under_construction.html">Under Construction</a></li>
                      <li><a href="intro.html">Intro Page</a></li>
                      <li class=""><a href="../404.html">404 page</a></li>
                    </ul>
                  </li>
                  <li><a href="portfolio.html">Portfolio</a></li>
                  <li class="active"><a href="slider.html">Slider</a></li>
                  <li><a href="social_media.html">Social and Media<br> Sharing</a></li>
                  <li><a href="css3.html">CSS3 Tricks</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>Slideshow</h1>
    <p class="lead"><a href="http://www.pixedelic.com/plugins/camera/">Camera Slideshow</a> is a jQuery slideshow by Pixedelic.</p>
  </div>
</header>

  <div class="container">

<!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav">
      <li><a href="#b-slider"><i class="icon-chevron-right"></i> Basic Slider</a></li>
      <li><a href="#th-slider"><i class="icon-chevron-right"></i> Slider with thumbnails</a></li>
        </ul>
      </div>
      <div class="span9">


<!-- Slider
================================================== -->
<section id="b-slider">
   <div class="page-header">
    <h1>Basic Slider <small>Pagination circles with the height relative to the width</small></h1>
  </div>
  <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
      <div data-thumb="img/camera/slides/thumbs/bridge.jpg" data-src="img/camera/slides/bridge.jpg">
          <div class="camera_caption fadeFromBottom">
              Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
          </div>
      </div>
      <div data-thumb="img/camera/slides/thumbs/leaf.jpg" data-src="img/camera/slides/leaf.jpg">
          <div class="camera_caption fadeFromBottom">
              It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
          </div>
      </div>
      <div data-thumb="img/camera/slides/thumbs/road.jpg" data-src="img/camera/slides/road.jpg">
          <div class="camera_caption fadeFromBottom">
              <em>It's completely free</em> (even if a donation is appreciated)
          </div>
      </div>
      <div data-thumb="img/camera/slides/thumbs/sea.jpg" data-src="img/camera/slides/sea.jpg">
          <div class="camera_caption fadeFromBottom">
              Camera slideshow provides many options <em>to customize your project</em> as more as possible
          </div>
      </div>
      <div data-thumb="img/camera/slides/thumbs/shelter.jpg" data-src="img/camera/slides/shelter.jpg">
          <div class="camera_caption fadeFromBottom">
              It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
          </div>
      </div>
      <div data-thumb="img/camera/slides/thumbs/tree.jpg" data-src="img/camera/slides/tree.jpg">
          <div class="camera_caption fadeFromBottom">
              Different color skins and layouts available, <em>fullscreen ready too</em>
          </div>
      </div>
  </div><!-- #camera_wrap_1 -->
  <h3>Basic HTML</h3>
<p>This is the basic html structure:</p>
<pre class="prettyprint linenums">
&lt;div class="camera_wrap"&gt;
    &lt;div data-src="images/image_1.jpg"&gt;&lt;/div&gt;
    &lt;div data-src="images/image_1.jpg"&gt;&lt;/div&gt;
    &lt;div data-src="images/image_2.jpg"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
  <h3>Initialization</h3>
<p>This is the main function to start your slideshow:</p>
<pre class="prettyprint linenums">
jQuery('your_object').camera();
</pre>
  <h3>Essential CSS</h3>
  <p>You have to call "camera.css" file.</p>
  <p>By editing this CSS file you can create your own personal skin.</p>
 
</section>

<section id="th-slider">
   <div class="page-header">
    <h1>Slider with thumbnails <small>Thumbnails with fixed height</small></h1>
  </div>
  <div class="camera_wrap camera_magenta_skin" id="camera_wrap_2">
      <div data-thumb="img/camera/slides/thumbs/bridge.jpg" data-src="img/camera/slides/bridge.jpg">
          <div class="camera_caption fadeFromBottom">
              Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
          </div>
      </div>
      <div data-thumb="img/camera/slides/thumbs/leaf.jpg" data-src="img/camera/slides/leaf.jpg">
          <div class="camera_caption fadeFromBottom">
              It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
          </div>
      </div>
      <div data-thumb="img/camera/slides/thumbs/road.jpg" data-src="img/camera/slides/road.jpg">
          <div class="camera_caption fadeFromBottom">
              <em>It's completely free</em> (even if a donation is appreciated)
          </div>
      </div>
      <div data-thumb="img/camera/slides/thumbs/sea.jpg" data-src="img/camera/slides/sea.jpg">
          <div class="camera_caption fadeFromBottom">
              Camera slideshow provides many options <em>to customize your project</em> as more as possible
          </div>
      </div>
      <div data-thumb="img/camera/slides/thumbs/shelter.jpg" data-src="img/camera/slides/shelter.jpg">
          <div class="camera_caption fadeFromBottom">
              It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
          </div>
      </div>
      <div data-thumb="img/camera/slides/thumbs/tree.jpg" data-src="img/camera/slides/tree.jpg">
          <div class="camera_caption fadeFromBottom">
              Different color skins and layouts available, <em>fullscreen ready too</em>
          </div>
      </div>
  </div><!-- #camera_wrap_2 -->
  <div style="clear:both;"></div>
<div class="tm_pad">
    <h3>Basic HTML</h3>
<p>This is the html structure:</p>
<pre class="prettyprint linenums">
&lt;div class="camera_wrap"&gt;
    &lt;div data-thumb="images/thumb_1.jpg" data-src="images/image_1.jpg"&gt;&lt;/div&gt;
    &lt;div data-thumb="images/thumb_2.jpg" data-src="images/image_1.jpg"&gt;&lt;/div&gt;
    &lt;div data-thumb="images/thumb_3.jpg" data-src="images/image_2.jpg"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
  <h3>Initialization</h3>
<p>Add some options to the main function.</p>
<pre class="prettyprint linenums">
jQuery('your_object').camera({ //the height and the presence of the thumbnails 
  height: '41%',
  pagination: false,
  thumbnails: true
});
</pre>
</div>
</section>

</div>

</div>

  </div>
   <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <ul class="footer-links">
          <li><a href="http://blog.getbootstrap.com">Blog</a></li>
          <li class="muted">&middot;</li>
          <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
          <li class="muted">&middot;</li>
          <li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
        </ul>
      </div>
    </footer>



    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/prettify.js"></script>
    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>
    <script src="js/bootstrap-affix.js"></script>
    <script src="js/application.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src='js/jquery.mobile.customized.min.js'></script>
    <script src='js/jquery.easing.1.3.js'></script> 
    <script src='js/camera.min.js'></script>
    <script>
    jQuery(function(){
      
      jQuery('#camera_wrap_1').camera({
        thumbnails: true
      });

      jQuery('#camera_wrap_2').camera({
        height: '400px',
        loader: 'bar',
        pagination: false,
        thumbnails: true
      });
    });
  </script>

</body>
</html>